কাস্টম টুলটিপ তৈরি

Web Development - জেকুয়েরি (jquery) - টুলটিপ এবং মডালস

163

কাস্টম টুলটিপ তৈরি করা ওয়েব পেজে ব্যবহারকারীদের বিশেষ তথ্য দেখাতে সাহায্য করে যখন তারা মাউস দিয়ে কোনো নির্দিষ্ট এলিমেন্টের উপর হোভার করে। jQuery ব্যবহার করে আপনি সহজেই এমন একটি টুলটিপ তৈরি করতে পারেন যা আপনার ওয়েব পেজের ডিজাইন এবং ফাংশনালিটির সাথে মিলবে।

HTML এবং CSS সেটআপ

প্রথমে, আপনাকে টুলটিপ প্রদর্শনের জন্য কিছু বেসিক HTML এবং CSS সেট আপ করতে হবে।

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Custom Tooltip Example</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <p>Hover over this text to see the <span class="tooltip">tooltip<span class="tooltiptext">This is the tooltip text!</span></span>.</p>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <script src="script.js"></script>
</body>
</html>

CSS (styles.css):

.tooltip {
    position: relative;
    display: inline-block;
}

.tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: white;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    bottom: 150%;
    left: 50%;
    margin-left: -60px;
    opacity: 0;
    transition: opacity 0.3s;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}

jQuery স্ক্রিপ্ট (script.js)

jQuery ব্যবহার করে আপনি টুলটিপের ইন্টারঅ্যাকটিভ বিহেভিয়র যোগ করতে পারেন।

JavaScript (script.js):

$(document).ready(function() {
    $('.tooltip').hover(function() {
        // হোভারের সময় টুলটিপ দেখান
        $(this).find('.tooltiptext').css('visibility', 'visible').animate({opacity: 1}, 300);
    }, function() {
        // হোভার শেষে টুলটিপ লুকান
        $(this).find('.tooltiptext').animate({opacity: 0}, 300, function() {
            $(this).css('visibility', 'hidden');
        });
    });
});

এই স্ক্রিপ্টটি হোভার করার সময় টুলটিপ টেক্সটকে দৃশ্যমান করে এবং হোভার শেষে তা ধীরে ধীরে লুকায়। CSS ট্রানজিশন এবং jQuery অ্যানিমেশনের মিশ্রণ একটি সুন্দর এবং মসৃণ ভিজ্যুয়াল ইফেক্ট তৈরি করে।

এই কাস্টম টুলটিপ সমাধান আপনার ওয়েব অ্যাপ্লিকেশনের ইউজার ইন্টারফেসকে আরও ইন্টারঅ্যাক্টিভ এবং আকর্ষণীয় করে তুলবে। jQuery এবং CSS ব্যবহার করে টুলটিপ ফাংশনালিটি যো

গ করা একটি কার্যকর উপায় যা বিভিন্ন ওয়েব প্রোজেক্টে প্রয়োগ করা যেতে পারে।

Content added By